[이준기] week8, 11#336
Hidden character warning
Conversation
… into part2-이준기-week6
Tanney-102
left a comment
Tanney-102
left a comment
There was a problem hiding this comment.
이번 미션때 vite를 사용하지 않았는데 꼭 써야하나요? 그래야 한다면 이유가 궁금합니다.
vite가 필수 요구 사항이었나요?
우선 지금 구현 하신 내용으로 봐서는 create react app을 사용하신 것 같은데 cra로 생성한 앱에는 번들러가 내장되어있기 때문에 따로 vite같은 번들러를 붙일 필요는 없습니다.
그래서 번들러의 개념은 알아두시긴 해야합니다.
webpack, vite 같은 아이들에 대해 학습해보시면 좋을 듯해요
| const formattedDate = formatDateString(data.created_at); | ||
| const [imgNull, setImgNull] = useState(""); | ||
| const createdTime = calculateElapsedTime(data.created_at); | ||
| const [kebabBool, setKebabBool] = useState(false); |
There was a problem hiding this comment.
더 좋은 변수명이 있을 것 같습니다.
변수명이 타입(bool)을 포함하도록 하는 건 좋은 습관이 아니에요.
정확히 어떤 역할을 하는 변수인지 잘 표현해주세요.
약간의 팁을 드리자면 boolean 타입의 변수들에 경우 is~, has~ 같은 prefix를 붙이면 의미를 나타내기 좋습니다.
kebabBool같은 경우 삭제, 폴더의 추가 등 여러 동작들을 노출할지를 결정하므로 isShowMoreActions이런 느낌으로 네이밍 해볼 수 있겠네요.
| useEffect(setImageNull, [data.image_source]); | ||
| useEffect(() => { | ||
| const ago = calculateAgo(createdTime); | ||
| setAgo(ago); | ||
| }, [createdTime]); |
There was a problem hiding this comment.
useEffect에 넘기는 콜백을 따로 선언하는 경우도 있고 화살표함수로 바로 선언하는 경우도 있네요.
특별한 이유가 없다면 일관된 컨벤션으로 작성해주시면 좋을 듯 합니다.
| const [selectSortName, setSelectSortName] = useState<number>(0); | ||
| const [foldLinkTitle, setFoldLinkTitle] = useState<string>("전체"); | ||
| const [sortData, setSortData] = useState<FolderData[]>([]); |
There was a problem hiding this comment.
지금도 좋지만 타입이 충분히 추론되는 경우에는 굳이 타입을 따로 적어주지 않아도 괜찮습니다.
useState에 0을 넘기면 해당 state가 자연스럽게 number 타입으로 추론되어요.
L20 처럼 단순히 배열 리터럴([]) 만으로 FolderData의 배열임이 추론되지 않는 경우에는 제네릭을 넣어주는 게 의미 있습니다.
| const [selectSortName, setSelectSortName] = useState<number>(0); | |
| const [foldLinkTitle, setFoldLinkTitle] = useState<string>("전체"); | |
| const [sortData, setSortData] = useState<FolderData[]>([]); | |
| const [selectSortName, setSelectSortName] = useState(0); | |
| const [foldLinkTitle, setFoldLinkTitle] = useState("전체"); | |
| const [sortData, setSortData] = useState<FolderData[]>([]); |
| const [modalContent, setModalContent] = useState<string | null>(null); | ||
| const [modalOpen, setModalOpen] = useState(false); | ||
|
|
||
| const clickSortName: React.MouseEventHandler<HTMLButtonElement> = (event) => { |
| style={{ | ||
| backgroundColor: | ||
| selectSortName === item.id ? "#6D6AFE" : "#fff", | ||
| color: selectSortName === item.id ? "#fff" : "black", | ||
| }} |
There was a problem hiding this comment.
inline style 보다는 sytled로 작성해주세요
| <S.ModalBlur> | ||
| <S.Container> | ||
| <S.CloseClick onClick={handleCloseModal} /> | ||
| <S.Feature>이름 변경하기</S.Feature> | ||
| <S.ContentInput /> | ||
| <S.Button> | ||
| <p>변경하기</p> | ||
| </S.Button> | ||
| </S.Container> | ||
| </S.ModalBlur> |
There was a problem hiding this comment.
각 컴포넌트마다 공통되는 부분은 따로 분리해도 될 것 같아요.
function Modal({ onClose, children }) {
return (
<S.ModalBlur>
<S.Container>
{ children }
</S.Container>
</S.ModalBlur>
)
}대강 이런느낌으로 분리될 것 같아요
|
컨플릭 한 번만 해소 부탁 드립니다~! |
3 participants
요구사항
8주차
기본
11주차
기본
심화
주요 변경사항
스크린샷
멘토에게